<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>Hello World</title>

        <!-- required modeler styles -->
        <link rel="stylesheet" href="../res/plugin/bpmn-js/assets/diagram-js.css">
        <link rel="stylesheet" href="../res/plugin/bpmn-js/assets/bpmn-font/css/bpmn.css">

        <!-- modeler distro -->
        <script src="../res/plugin/bpmn-js/bpmn-modeler.development.js"></script>

        <!-- needed for this example only -->
        <script src="../res/js/jquery-3.4.1.min.js"></script>

        <!-- example styles -->
        <style>
            html, body, #canvas {
                height: 100%;
                padding: 0;
                margin: 0;
            }

            .diagram-note {
                background-color: rgba(66, 180, 21, 0.7);
                color: White;
                border-radius: 5px;
                font-family: Arial;
                font-size: 12px;
                padding: 5px;
                min-height: 16px;
                width: 50px;
                text-align: center;
            }

            .needs-discussion:not(.djs-connection) .djs-visual > :nth-child(1) {
                stroke: rgba(66, 180, 21, 0.7) !important; /* color elements as red */
            }

            #save-button {
                position: fixed;
                bottom: 20px;
                left: 20px;
            }
        </style>
    </head>
    <body>
        <div id="canvas"></div>

        <button id="save-button">print to console</button>

        <script>

            // modeler instance
            var bpmnModeler = new BpmnJS({
                container: '#canvas',
                keyboard: {
                    bindTo: window
                }
            });

            function openDiagram(bpmnXML) {
                if (bpmnXML === "" || bpmnXML === null) {
                    bpmnXML = '<?xml version="1.0" encoding="UTF-8"?>\n' +
                        '<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn">\n' +
                        '  <bpmn2:process id="Process_1">\n' +
                        '    <bpmn2:startEvent id="StartEvent_1"/>\n' +
                        '  </bpmn2:process>\n' +
                        '  <bpmndi:BPMNDiagram id="BPMNDiagram_1">\n' +
                        '    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">\n' +
                        '      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">\n' +
                        '        <dc:Bounds height="36.0" width="36.0" x="412.0" y="240.0"/>\n' +
                        '      </bpmndi:BPMNShape>\n' +
                        '    </bpmndi:BPMNPlane>\n' +
                        '  </bpmndi:BPMNDiagram>\n' +
                        '</bpmn2:definitions>'; //BPMN 2.0 xml
                }
                // import diagram
                bpmnModeler.importXML(bpmnXML, function(err) {
                    if (err) {
                        return console.error('could not import BPMN 2.0 diagram', err);
                    }
                    // access modeler components
                    var canvas = bpmnModeler.get('canvas');
                    var eventBus = bpmnModeler.get("eventBus");

                    // zoom to fit full viewport
                    canvas.zoom('fit-viewport');

                    eventBus.on('element.click', function(evt) {
                        console.log('user clicked', evt.element);
                        evt.element.id = 'StartEvent';
                    });
                });
            }

            openDiagram(null);

        </script>
    </body>
</html>